<!-- eslint-disable vue/require-v-for-key -->
<!-- eslint-disable vue/valid-v-for -->
<template>
  <div class="hk-container">
    <div class="hk-flex-bottom">
      <el-form
        v-show="showSearch"
        ref="queryForm"
        :model="queryParams"
        size="small"
        style="flex:1"
        :inline="true"
        @submit.native.prevent
      >
        <el-form-item label="关键字" prop="queryKeywords">
          <el-input
            v-model="queryParams.queryKeywords"
            placeholder="请输入数据源名称/IP"
            clearable
            style="width: 240px"
            maxlength="20"
            @keyup.enter.native="handleSearch"
          />
        </el-form-item>

        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="handleSearch"
          >查询</el-button>
          <el-button
            icon="el-icon-refresh"
            size="mini"
            @click="resetQuery"
          >重置</el-button>
        </el-form-item>
      </el-form>
      <el-row :gutter="10" class="mt2">
        <el-col :span="1.5">
          <el-button
            type="primary"
            icon="el-icon-plus"
            size="mini"
            @click="handleAdd"
          >新增
          </el-button>
        </el-col>
      </el-row>
    </div>
    <div v-loading="loading" class="table-wk">
      <div v-if="planList.length>0" ref="tableLists" class="table-lists">
        <div v-for="(item) in planList" :key="item.id" class="table-list hk-flex">
          <div class="table-list-l">
            <img class="list-img" :src="item.typeIconUrl || require('@/assets/images/sjjr_jrsjy_all.png')" alt="">
          </div>
          <div v-if="item.sourceType=='ES'" class="table-list-c" style="flex:1">
            <h4 class="table-tit">{{ item.name }}</h4>
            <div class="table-cont hk-flex">
              <div class="flex-1"><span>ES服务IP：</span>{{ item.ip?item.ip:'-' }}</div>
              <div class="flex-1"><span>ES服务端口：</span>{{ item.port?item.port:'-' }}</div>
              <div class="flex-1"><span>索引名称：</span>{{ item.indexName?item.indexName:'-' }}</div>
              <div class="flex-1"><span>元数据：</span>{{ item.metaName?item.metaName:'-' }}</div>
            </div>
            <div class="table-cont">
              <div class="hk-flex">
                <span style="width:70px;">关联任务：</span>
                <div v-if="item.jsonObject.tasks.length>0" class="cont-elips flex-1">
                  <!-- <el-tooltip placement="top-start" :content="item.jsonObject.tasks.join(' 、 ') "> -->
                  <div class="el-ellipsis">
                    <span v-for="(i,indx) in item.jsonObject.tasks" :key="indx" class="table-cont-list">
                      {{ i }}
                      <b v-if="item.jsonObject.tasks.length>1 && indx!=item.jsonObject.tasks.length-1" class="marg-10">|</b>
                    </span>
                  </div>

                  <!-- </el-tooltip> -->
                  <!-- <template v-for="(i,indx) in item.jsonObject.tasks" class="table-cont-list">
                        {{ i }}
                        <b v-if="item.jsonObject.tasks.length>1 && indx!=item.jsonObject.tasks.length-1" class="marg-10">|</b>
                      </template> -->
                </div>
                <template v-else>
                  <span class="table-cont-list">-</span>
                </template>
              </div>
            </div>
          </div>
          <div v-else-if="item.sourceType=='Kafka'" class="table-list-c" style="flex:1">
            <h4 class="table-tit">{{ item.name }}</h4>
            <div class="table-cont hk-flex">
              <div class="flex-1"><span>队列服务IP：</span>{{ item.ip?item.ip:'-' }}</div>
              <div class="flex-1"><span>队列服务端口：</span>{{ item.port?item.port:'-' }}</div>
              <div class="flex-1"><span>服务主题名：</span>{{ item.topic?item.topic:'-' }}</div>

            </div>
            <div class="table-cont">
              <div class="hk-flex">
                <span style="width:70px;">关联任务：</span>
                <div v-if="item.jsonObject.tasks.length>0" class="cont-elips flex-1">
                  <!-- <el-tooltip placement="top-start" :content="item.jsonObject.tasks.join(' 、 ') "> -->
                  <div class="el-ellipsis">
                    <span v-for="(i,indx) in item.jsonObject.tasks" :key="indx" class="table-cont-list">
                      {{ i }}
                      <b v-if="item.jsonObject.tasks.length>1 && indx!=item.jsonObject.tasks.length-1" class="marg-10">|</b>
                    </span>
                  </div>

                  <!-- </el-tooltip> -->
                  <!-- <template v-for="(i,indx) in item.jsonObject.tasks" class="table-cont-list">
                        {{ i }}
                        <b v-if="item.jsonObject.tasks.length>1 && indx!=item.jsonObject.tasks.length-1" class="marg-10">|</b>
                      </template> -->
                </div>
                <template v-else>
                  <span class="table-cont-list">-</span>
                </template>
              </div>
            </div>
          </div>
          <div v-else-if="item.sourceType=='JDBC'" class="table-list-c" style="flex:1">
            <h4 class="table-tit">{{ item.name }}</h4>
            <div class="table-cont hk-flex">
              <div class="flex-1"><span>数据库IP：</span>{{ item.ip?item.ip:'-' }}</div>
              <div class="flex-1"><span>数据库端口：</span>{{ item.port?item.port:'-' }}</div>
              <div class="flex-1"><span>数据库类型：</span>{{ item.jsonObject.databaseType?item.jsonObject.databaseType:'-' }}</div>
              <div class="flex-1"><span>数据表：</span>{{ item.tableName?item.tableName:'-' }}</div>

            </div>
            <div class="table-cont">
              <div class="hk-flex">
                <span style="width:70px;">关联任务：</span>
                <div v-if="item.jsonObject.tasks.length>0" class="cont-elips flex-1">
                  <!-- <el-tooltip placement="top-start" :content="item.jsonObject.tasks.join(' 、 ') "> -->
                  <div class="el-ellipsis">
                    <span v-for="(i,indx) in item.jsonObject.tasks" :key="indx" class="table-cont-list">
                      {{ i }}
                      <b v-if="item.jsonObject.tasks.length>1 && indx!=item.jsonObject.tasks.length-1" class="marg-10">|</b>
                    </span>
                  </div>
                </div>
                <template v-else>
                  <span class="table-cont-list">-</span>
                </template>
              </div>

            </div>
          </div>
          <div class="table-list-r">
            <el-button size="mini" type="text" @click="handleUpdate(item)">编辑 </el-button>
            <span class="btn-line">|</span>
            <el-button size="mini" type="text" @click="handleDelete(item)">删除 </el-button>
          </div>
        </div>
      </div>
      <div v-else ref="tableLists" class="table-lists">
        <el-empty description="暂无数据" />
      </div>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.current"
        :limit.sync="queryParams.size"
        @pagination="handleChangePage"
      />
    </div>
    <!-- 添加或修改角色配置对话框 -->
    <sys-dialog
      ref="sysRef"
      :title="title"
      :data-type="dataType"
      :source-type="sourceType"
      @changeOpen="changeOpen"
    />
  </div>
</template>

<script>
import sysDialog from './SysDialog'
import styleType from '../styleType'
import HkTable from '@/components/Hk-Table/index'
import {
  getSource,
  delSource
} from '@/api/milkyway/repositorypage'
export default {
  name: 'Syslog',
  components: { sysDialog, styleType, HkTable },
  props: {
    id: {
      type: String,
      default: ''
    },
    sourceType: {
      type: String,
      default: ''
    },
    dataType: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      planList: [],
      qualtableLabel: [
        { label: '数据源名称', param: 'name' },
        { label: 'ES服务IP', param: 'ip' },
        { label: '端口', param: 'port' },
        { label: '索引名', param: 'indexName' },
        { label: '元数据', param: 'metaName' },
        { label: '关联任务', param: 'tasks', type: 'slot', with: 400 }
      ],
      styleType: false,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 角色表格数据
      roleList: [],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      metaId: '',

      // 查询参数
      queryParams: {
        current: 1,
        size: 10
      },
      // 表单参数
      form: {}
    }
  },
  watch: {
    sourceType: {
      handler(newVal) {
        this.queryParams.current = 1
        this.getList()
        this.$refs.tableLists.scrollTop = 0
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    changeOpen() {
      this.$emit('changeOpen')
      this.getList()
    },
    getDetails(res) {
      const _res = res
      if (Array.isArray(res)) {
        _res.forEach((item) => {
          const _data = JSON.parse(item.connectInfo)
          item.databaseTypeId = _data.databaseTypeId || undefined
          item.databaseName = _data.databaseName || undefined
          item.tableName = _data.tableName || undefined
          item.topic = _data.topic || undefined
          item.groupId = _data.groupId || undefined
          item.protocol = _data.protocol || undefined
          item.indexName = _data.indexName || undefined
          item.metaName = item.jsonObject.metaName || undefined
          item.metaId = item.jsonObject.metaId
          item.taskNums = item.jsonObject.taskNums || undefined
          item.tasks = item.jsonObject.tasks || undefined
        })
      } else {
        const data = JSON.parse(_res.connectInfo)
        _res.databaseTypeId = data.databaseTypeId || undefined
        _res.databaseName = data.databaseName || undefined
        _res.tableName = data.tableName || undefined
        _res.topic = data.topic || undefined
        _res.groupId = data.groupId || undefined
        _res.protocol = data.protocol || undefined
        _res.indexName = data.indexName || undefined
        // _res.metaName = _res.jsonObject.metaName||undefined;
        // _res.metaId = _res.jsonObject.metaId||undefined;
        // _res.taskNums = _res.jsonObject.taskNums||undefined;
        // _res.tasks = _res.jsonObject.tasks||undefined;
      }
      return _res
    },
    /* 分页 */
    handleChangePage() {
      this.getList()
      this.$refs.tableLists.scrollTop = 0
    },
    /** 查询列表 */
    getList(val) {
      this.loading = true
      this.queryParams = {
        ...this.queryParams,
        ...val,
        sourceType: this.sourceType
      }
      getSource(this.queryParams).then((res) => {
        this.planList = this.getDetails(res.list)
        this.total = res.total
        this.loading = false
      })
    },
    //  查询
    handleSearch() {
      this.queryParams.current = 1
      this.getList()
      this.$refs.tableLists.scrollTop = 0
    },
    // 表单重置
    reset() {
      if (this.$refs.menu != undefined) {
        this.$refs.menu.setCheckedKeys([])
      }
      // eslint-disable-next-line no-sequences
      (this.menuExpand = false),
      (this.menuNodeAll = false),
      (this.deptExpand = true),
      (this.deptNodeAll = false),
      (this.form = {
        roleId: undefined,
        roleName: undefined,
        roleKey: undefined,
        roleSort: 0,
        status: '0',
        menuIds: [],
        deptIds: [],
        menuCheckStrictly: true,
        deptCheckStrictly: true,
        remark: undefined
      })
      this.resetForm('form')
    },

    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = []
      this.resetForm('queryForm')
      this.getList()
      this.$refs.tableLists.scrollTop = 0
    },

    /** 新增按钮操作 */
    handleAdd() {
      this.reset()
      this.$refs.sysRef.show()
      this.title = '添加'
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset()
      this.$refs.sysRef.show(row.id)
      this.title = '编辑'
    },

    /** 删除按钮操作 */
    handleDelete(row) {
      const id = row.id
      const name = row.name
      this.$modal
        .confirm('是否确认删除数据源名称为"' + name + '"的数据项？')
        .then(function() {
          return delSource({ id })
        })
        .then(() => {
          this.$emit('updateData')
          this.getList()
          this.$modal.msgSuccess('删除成功')
        })
        .catch(() => {})
    }
  }
}
</script>
<style lang="scss" scoped>
  .hk-container {
    background: #fff;
    width: 100% !important;
    overflow: hidden;
    height: 100%;
    padding: 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    border-radius: 4px;
  }
.targetTable{
  overflow: hidden;
}
</style>
